<template>
<div class='history'>
		<!-- 挂号记录列表展示 每个挂号单 history-item-wrap -->
		<div class='history-item-wrap' v-for="v in DataTable" :key="v.id">
			<!-- 挂号信息循环展示 history-item  -->
				<div class='history-item'>
					<div class='history-item-left'>就诊医生：</div>
					<div class='history-item-right font-bold color-blue'>{{v.doctor}}</div>
				</div>
				<div class='history-item'>
					<div class='history-item-left'>就诊科室：</div>
					<div class='history-item-right  font-bold color-blue'>{{v.position}}</div>
				</div>
				<div class='history-item'>
					<div class='history-item-left'>就诊时间：</div>
					<div class='history-item-right'>{{v.time}}</div>
				</div>
				<div class='history-item'>
					<div class='history-item-left'>就诊人：</div>
					<div class='history-item-right'>{{v.Patient}}</div>
				</div>
				<div class='history-item'>
					<div class='history-item-left'>联系电话：</div>
					<div class='history-item-right'>{{v.Phone}}</div>
				</div>
				<div class='history-item'>
					<div class='history-item-left'>状态：</div>
					<!-- 已取消的class用color-red  -->
                    <div>
                    <template slot-scope="scope">
                        <el-tag
                    :type="v.status === 0 ? 'danger' : (v.status === 1 ? 'primary' : (v.s === 2 ? 'warning' : 'success'))"
                    disable-transitions>{{scope.row.roleId === 0 ? '管理员' :
                                            (scope.row.roleId === 1 ? '主治医师' :
                                                (scope.row.roleId === 2 ? '药房管理人员' : '库房管理'))}}</el-tag>
                    </template>
                    </div>
					<!-- <div class='history-item-right font-bold color-green'>已预约</div>  -->
				</div>
			
	</div>
</div>
  
</template>

<script>
export default {
  name: 'MyForm',
  data(){
      return{
          DataTable:[
              {id:'1',doctor:'王小妹',position:'外科',time:'2024-2-10',Patient:'张三',Phone:'13011985876',status:'0'},
              {id:'2',doctor:'王大帅',position:'内科',time:'2024-3-10',Patient:'李四',Phone:'13011985876',status:'1'},
              {id:'3',doctor:'王小美',position:'外科',time:'2024-1-10',Patient:'王五',Phone:'13011985876',status:'2'},
              {id:'4',doctor:'王晓梅',position:'内科',time:'2023-2-10',Patient:'陈玉金',Phone:'13011985876',status:'0'},
              {id:'5',doctor:'王春花',position:'外科',time:'2024-1-10',Patient:'大',Phone:'13011985876',status:'0'},
          ]
          
      }
  },


  methods:{
      
  }
  
}
</script>


<style scoped>
.font-bold {
    font-weight: bold;
}
.color-blue {
    color: #508bed;
}
.color-green {
    color: #009966;
}
.color-red {
    color: #f67c14;
}
.history {
    background: #f2f2f2;
    padding: 15px;
}
.history .history-item-wrap {
    padding: 15px;
    border-radius: 4px;
    background:#fff;
    margin-bottom: 12px;
}
.history .history-item-wrap:last-child{
    margin-bottom: 0;
}
.history .history-item-wrap .history-item {
    display: flex;
    align-items: center;
    padding: 2px 0;
}
.history .history-item-wrap .history-item .history-item-left {
    width:100px;
}

</style>
